<lv-transfer
  class="customer-transfer"
  [lvSourceData]="source.data"
  [lvTargetData]="source.selection"
  [lvSourceSelection]="source.selection"
  [lvTitles]="['Long title Long title Long title Long title Long title Long title Long title Long title Long title']"
  [lvRenders]="[sourceRender, targetRender]"
  (lvSelectionChange)="selectionChange($event)"
></lv-transfer>

<ng-template #sourceRender let-data>
  <ng-container *ngIf="data.length; else noData">
    <lv-checkbox-group #checkgroup [(ngModel)]="selection" (ngModelChange)="change($event)" class="transfer-checkbox-content">
      <ng-container *ngFor="let item of data">
        <lv-checkbox [lvValue]="item.value" class="transfer-checkbox-item">
          <div>{{ item.label }}-{{ item.description }}</div>
        </lv-checkbox>
      </ng-container>
    </lv-checkbox-group>
 </ng-container>
</ng-template>

<ng-template #targetRender let-data>
  <ng-container *ngIf="data.length; else noData">
  <div *ngFor="let item of data" class="transfer-checkbox-item transfer-checkbox-target-item">
    <div>{{ item.label }}-{{ item.description }}</div>
    <i lv-icon="lv-icon-clear" class="transfer-checkbox-item-remove" (click)="remove(item)"></i>
  </div>
  </ng-container>
</ng-template>


<!--无数据-->
<ng-template #noData>
  <div style="display:flex;align-items: center;height: 100%;">
    <lv-empty></lv-empty>
  </div>
</ng-template>

